



<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#FFF">
  <link rel="apple-touch-icon" sizes="180x180" href="/images/amatsutsumi.ico">

<link rel="icon" type="image/ico" sizes="32x32" href="/images/favicon.ico">
  <meta http-equiv="Cache-Control" content="no-transform">
  <meta http-equiv="Cache-Control" content="no-siteapp">


<link rel="alternate" type="application/rss+xml" title="auroraの失落之境" href="https://auroraisok.gitee.io/rss.xml" />
<link rel="alternate" type="application/atom+xml" title="auroraの失落之境" href="https://auroraisok.gitee.io/atom.xml" />
<link rel="alternate" type="application/json" title="auroraの失落之境" href="https://auroraisok.gitee.io/feed.json" />

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Mulish:300,300italic,400,400italic,700,700italic%7CFredericka%20the%20Great:300,300italic,400,400italic,700,700italic%7CNoto%20Serif%20JP:300,300italic,400,400italic,700,700italic%7CNoto%20Serif%20SC:300,300italic,400,400italic,700,700italic%7CInconsolata:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">

<link rel="stylesheet" href="/css/app.css?v=0.2.5">

  

<link rel="canonical" href="https://auroraisok.gitee.io/2023/12/18/css%E9%80%89%E6%8B%A9%E5%99%A8%E7%9A%84%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/">



  <title>
css选择器的学习笔记 |
aurora = auroraの失落之境 = 吾は悪事も一言、善事も一言、言い离つ神。</title>
<meta name="generator" content="Hexo 6.3.0"></head>
<body itemscope itemtype="http://schema.org/WebPage">
  <div id="loading">
    <div class="cat">
      <div class="body"></div>
      <div class="head">
        <div class="face"></div>
      </div>
      <div class="foot">
        <div class="tummy-end"></div>
        <div class="bottom"></div>
        <div class="legs left"></div>
        <div class="legs right"></div>
      </div>
      <div class="paw">
        <div class="hands left"></div>
        <div class="hands right"></div>
      </div>
    </div>
  </div>
  <div id="container">
    <header id="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="inner">
        <div id="brand">
          <div class="pjax">
          
  <h1 itemprop="name headline">css选择器的学习笔记
  </h1>
  
<div class="meta">
  <span class="item" title="创建时间：2023-12-18 17:09:29">
    <span class="icon">
      <i class="ic i-calendar"></i>
    </span>
    <span class="text">发表于</span>
    <time itemprop="dateCreated datePublished" datetime="2023-12-18T17:09:29+08:00">2023-12-18</time>
  </span>
</div>


          </div>
        </div>
        <nav id="nav">
  <div class="inner">
    <div class="toggle">
      <div class="lines" aria-label="切换导航栏">
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
      </div>
    </div>
    <ul class="menu">
      <li class="item title"><a href="/" rel="start">aurora</a></li>
    </ul>
    <ul class="right">
      <li class="item theme">
        <i class="ic i-sun"></i>
      </li>
      <li class="item search">
        <i class="ic i-search"></i>
      </li>
    </ul>
  </div>
</nav>

      </div>
      <div id="imgs" class="pjax">
        <ul>
          <li class="item" data-background-image="https://img.moehu.org/pic.php?id=img1?289093"></li>
          <li class="item" data-background-image="https://img.moehu.org/pic.php?id=img1?453733"></li>
          <li class="item" data-background-image="https://img.moehu.org/pic.php?id=img1?750048"></li>
          <li class="item" data-background-image="https://img.moehu.org/pic.php?id=img1?168831"></li>
          <li class="item" data-background-image="https://img.moehu.org/pic.php?id=img1?44258"></li>
          <li class="item" data-background-image="https://img.moehu.org/pic.php?id=img1?863904"></li>
        </ul>
      </div>
    </header>
    <div id="waves">
      <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
        <defs>
          <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
        </defs>
        <g class="parallax">
          <use xlink:href="#gentle-wave" x="48" y="0" />
          <use xlink:href="#gentle-wave" x="48" y="3" />
          <use xlink:href="#gentle-wave" x="48" y="5" />
          <use xlink:href="#gentle-wave" x="48" y="7" />
        </g>
      </svg>
    </div>
    <main>
      <div class="inner">
        <div id="main" class="pjax">
          
  <div class="article wrap">
    
<div class="breadcrumb" itemscope itemtype="https://schema.org/BreadcrumbList">
<i class="ic i-home"></i>
<span><a href="/">首页</a></span>
</div>

    <article itemscope itemtype="http://schema.org/Article" class="post block" lang="zh-CN">
  <link itemprop="mainEntityOfPage" href="https://auroraisok.gitee.io/2023/12/18/css%E9%80%89%E6%8B%A9%E5%99%A8%E7%9A%84%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/">

  <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
    <meta itemprop="image" content="/images/avatar.jpg">
    <meta itemprop="name" content="aurora">
    <meta itemprop="description" content="吾は悪事も一言、善事も一言、言い离つ神。, 水仙，花语是，珍爱自己">
  </span>

  <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
    <meta itemprop="name" content="auroraの失落之境">
  </span>

  <div class="body md" itemprop="articleBody">
    

    <p>关于选择器，很多人会想到 span、class、#、.、等一大堆杂乱的字符，刚开始还能学会，后来可能就忘了。</p>
<p>于是作为一名解剖一点儿也不会的医学生，写一写自己的学习笔记</p>
<hr>
选择器大致分为五类，全局选择器、元素选择器（span是一个元素选择器）、类选择器、id选择器、内联选择器。执行的优先级：内联>id>类>元素>全局
<ol>
<li><h1>全局选择器</h1>
全局选择器格式为*{}，对于全局生效，一般用于更改全局样式等。
</li>
<li><h1>元素选择器</h1>
元素选择器格式,诸如h1{},h1,h2{},作用是对某个标签的东西生效，相当于全局中“独树一帜”，特殊群体，可以摆脱全局的限制，优先级高。
</li>
<li><h1>类选择器</h1>
可以在元素标签中插入，诸如<p class="woshibenbi">我是笨比</p>，这相当于设置了一个类名为“woshibenbi”，类的名字是有限制的，英文字符、数字、短横线。还可以把“我是笨比”这句话划为两类、三类，只要第一个class标签后加空格，再写其他标签就好了。最后写法为：.woshibenbi{} (一定要用.号)。如果你想把css写的看起来高级冗杂些，还可以用合并选择器+类选择器，结果是网页变得更卡了......
</li>
<li><h1>id选择器</h1>
针对一个、一句话，class是针对一类，但是你想在这一类中找个特殊的，id选择器则是针对这一特殊的，给它标个id注明是什么,比如id标textl,就写：#textl{}  
</li>
<li><h1>内联选择器</h1>
这个的作用，可以直接选择一段话、一个字，打个比方：
元素选择器是针对国家、类选择器针对民族、id选择器针对某一个村、那么内联选择器则是具体到人，直接句子里插入就行，缺点也很明显，繁杂冗长
<hr>
<h2>span标签和内联选择器、id选择器、类选择器？</h2>
span标签可以适用好多个个体，给张三李四王五都打上，一个span标签就可以把他们放在一起。那么类选择器不也是可以吗？很遗憾，加入一段话中有连续的三个字在一起要标为特殊，类选择器办不到；而内联选择器只能一个个针对，太麻烦：你叫一个班的人，难道要一个个点名叫出来吗？
<p>而 id 选择器可以针对一个特殊的语句，相当于挨家挨户叫，内联选择器是一个个叫，元素选择器则是把带有某类标签的全部句子叫出来，类选择器则是分类：想怎么分怎么分，就算是 h5 和 p 标签两种完全不同的，也可以划为一类。</p>
<hr>
为了加深记忆，可以多去思考，写网页时多加几句注释，其实也是给自己看的。就是这样

  </div>

   <footer>

    <div class="meta">
  <span class="item">
    <span class="icon">
      <i class="ic i-calendar-check"></i>
    </span>
    <span class="text">更新于</span>
    <time title="修改时间：2023-12-18 17:57:51" itemprop="dateModified" datetime="2023-12-18T17:57:51+08:00">2023-12-18</time>
  </span>
  <span id="2023/12/18/css选择器的学习笔记/" class="item leancloud_visitors" data-flag-title="css选择器的学习笔记" title="阅读次数">
      <span class="icon">
        <i class="ic i-eye"></i>
      </span>
      <span class="text">阅读次数</span>
      <span class="leancloud-visitors-count"></span>
      <span class="text">次</span>
  </span>
</div>

      
<div class="reward">
  <button><i class="ic i-heartbeat"></i> 赞赏</button>
  <p>请我喝[茶]~(￣▽￣)~*</p>
  <div id="qr">
      
      <div>
        <img data-src="/images/wechatpay.png" alt="aurora 微信支付">
        <p>微信支付</p>
      </div>
      
      <div>
        <img data-src="/images/alipay.png" alt="aurora 支付宝">
        <p>支付宝</p>
      </div>
      
      <div>
        <img data-src="/images/paypal.png" alt="aurora 贝宝">
        <p>贝宝</p>
      </div>
  </div>
</div>

      

<div id="copyright">
<ul>
  <li class="author">
    <strong>本文作者： </strong>aurora <i class="ic i-at"><em>@</em></i>auroraの失落之境
  </li>
  <li class="link">
    <strong>本文链接：</strong>
    <a href="https://auroraisok.gitee.io/2023/12/18/css%E9%80%89%E6%8B%A9%E5%99%A8%E7%9A%84%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/" title="css选择器的学习笔记">https://auroraisok.gitee.io/2023/12/18/css选择器的学习笔记/</a>
  </li>
  <li class="license">
    <strong>版权声明： </strong>本站所有文章除特别声明外，均采用 <span class="exturl" data-url="aHR0cHM6Ly9jcmVhdGl2ZWNvbW1vbnMub3JnL2xpY2Vuc2VzL2J5LW5jLXNhLzQuMC9kZWVkLnpo"><i class="ic i-creative-commons"><em>(CC)</em></i>BY-NC-SA</span> 许可协议。转载请注明出处！
  </li>
</ul>
</div>

  </footer>

</article>

  </div>
  

<div class="post-nav">
    <div class="item left">
      

  <a href="/2023/12/17/%E3%80%90%E6%8E%A8%E8%8D%90%E3%80%91%E4%B8%80%E4%BA%9B%E5%82%AC%E6%B3%AA%E3%80%81%E6%B7%B1%E5%88%BB%E7%9A%84galgame/" itemprop="url" rel="prev" data-background-image="https:&#x2F;&#x2F;img.moehu.org&#x2F;pic.php?id&#x3D;img1?504812" title="【推荐】一些催泪、深刻的galgame">
  <span class="type">上一篇</span>
  <span class="category"><i class="ic i-flag"></i> </span>
  <h3>【推荐】一些催泪、深刻的galgame</h3>
  </a>

    </div>
    <div class="item right">
      

  <a href="/2023/12/19/Galgame-%E6%B1%89%E5%8C%96%E7%A0%B4%E8%A7%A3%E5%88%9D%E7%BA%A7%E6%95%99%E7%A8%8B%EF%BC%9A%E4%BB%A5-BGI-%E4%B8%BA%E4%BE%8B%EF%BC%8C%E4%BB%8E%E8%A7%A3%E5%8C%85%E5%88%B0%E6%B5%8B%E8%AF%95/" itemprop="url" rel="next" data-background-image="https:&#x2F;&#x2F;img.moehu.org&#x2F;pic.php?id&#x3D;img1?427429" title="Galgame 汉化破解初级教程：以 BGI 为例，从解包到测试">
  <span class="type">下一篇</span>
  <span class="category"><i class="ic i-flag"></i> </span>
  <h3>Galgame 汉化破解初级教程：以 BGI 为例，从解包到测试</h3>
  </a>

    </div>
</div>

  
  <div class="wrap" id="comments"></div>


        </div>
        <div id="sidebar">
          

<div class="inner">

  <div class="panels">
    <div class="inner">
      <div class="contents panel pjax" data-title="文章目录">
          <ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link"><span class="toc-number">1.</span> <span class="toc-text">全局选择器</span></a></li><li class="toc-item toc-level-1"><a class="toc-link"><span class="toc-number">2.</span> <span class="toc-text">元素选择器</span></a></li><li class="toc-item toc-level-1"><a class="toc-link"><span class="toc-number">3.</span> <span class="toc-text">类选择器</span></a></li><li class="toc-item toc-level-1"><a class="toc-link"><span class="toc-number">4.</span> <span class="toc-text">id选择器</span></a></li><li class="toc-item toc-level-1"><a class="toc-link"><span class="toc-number">5.</span> <span class="toc-text">内联选择器</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link"><span class="toc-number">5.1.</span> <span class="toc-text">span标签和内联选择器、id选择器、类选择器？</span></a></li></ol></li></ol>
      </div>
      <div class="related panel pjax" data-title="系列文章">
      </div>
      <div class="overview panel" data-title="站点概览">
        <div class="author" itemprop="author" itemscope itemtype="http://schema.org/Person">
  <img class="image" itemprop="image" alt="aurora"
      data-src="/images/avatar.jpg">
  <p class="name" itemprop="name">aurora</p>
  <div class="description" itemprop="description">水仙，花语是，珍爱自己</div>
</div>

<nav class="state">
    <div class="item posts">
      <a href="/archives/">
        <span class="count">71</span>
        <span class="name">文章</span>
      </a>
    </div>
    <div class="item tags">
      <a href="/tags/">
        <span class="count">8</span>
        <span class="name">标签</span>
      </a>
    </div>
</nav>

<div class="social">
</div>

<ul class="menu">
  
    
  <li class="item">
    <a href="/" rel="section"><i class="ic i-home"></i>首页</a>
  </li>

    
  <li class="item">
    <a href="/about/" rel="section"><i class="ic i-user"></i>关于</a>
  </li>

        
  <li class="item dropdown">
      <a href="javascript:void(0);"><i class="ic i-feather"></i>文章</a>
    <ul class="submenu">

        
  <li class="item">
    <a href="/archives/" rel="section"><i class="ic i-list-alt"></i>归档</a>
  </li>

        
  <li class="item">
    <a href="/categories/" rel="section"><i class="ic i-th"></i>分类</a>
  </li>

        
  <li class="item">
    <a href="/tags/" rel="section"><i class="ic i-tags"></i>标签</a>
  </li>

  </ul>
    
  <li class="item">
    <a href="/friends/" rel="section"><i class="ic i-user-secret"></i>Q群和友链</a>
  </li>

    
  <li class="item">
    <a href="/liuyan/" rel="section"><i class="ic i-feather"></i>留言板</a>
  </li>

    
  <li class="item">
    <a href="/liaotian/" rel="section"><i class="ic i-feather"></i>在线聊天室</a>
  </li>


</ul>

      </div>
    </div>
  </div>

  <ul id="quick">
    <li class="prev pjax">
        <a href="/2023/12/17/%E3%80%90%E6%8E%A8%E8%8D%90%E3%80%91%E4%B8%80%E4%BA%9B%E5%82%AC%E6%B3%AA%E3%80%81%E6%B7%B1%E5%88%BB%E7%9A%84galgame/" rel="prev" title="上一篇"><i class="ic i-chevron-left"></i></a>
    </li>
    <li class="up"><i class="ic i-arrow-up"></i></li>
    <li class="down"><i class="ic i-arrow-down"></i></li>
    <li class="next pjax">
        <a href="/2023/12/19/Galgame-%E6%B1%89%E5%8C%96%E7%A0%B4%E8%A7%A3%E5%88%9D%E7%BA%A7%E6%95%99%E7%A8%8B%EF%BC%9A%E4%BB%A5-BGI-%E4%B8%BA%E4%BE%8B%EF%BC%8C%E4%BB%8E%E8%A7%A3%E5%8C%85%E5%88%B0%E6%B5%8B%E8%AF%95/" rel="next" title="下一篇"><i class="ic i-chevron-right"></i></a>
    </li>
    <li class="percent"></li>
  </ul>
</div>


        </div>
        <div class="dimmer"></div>
      </div>
    </main>
    <footer id="footer">
      <div class="inner">
        <div class="widgets">
          
<div class="rpost pjax">
  <h2>随机文章</h2>
  <ul>
      
  <li class="item">
    
<div class="breadcrumb">
</div>

    <span><a href="/2023/10/27/%E3%80%8AGINKA%E3%80%8B%E8%A7%A3%E5%8C%85%E8%AE%B0%E5%BD%95%E5%8F%8A%E4%BD%9C%E5%93%81%E7%AE%80%E8%AF%84/" title="《GINKA》解包记录及作品简评">《GINKA》解包记录及作品简评</a></span>
  </li>

      
  <li class="item">
    
<div class="breadcrumb">
</div>

    <span><a href="/2024/02/12/%E9%AD%94%E6%B3%95%E5%88%86%E4%BA%AB/" title="魔法分享">魔法分享</a></span>
  </li>

      
  <li class="item">
    
<div class="breadcrumb">
</div>

    <span><a href="/2023/10/08/%E8%A7%86%E8%A7%89%E5%B0%8F%E8%AF%B4%E5%B8%B8%E7%94%A8%E6%A8%A1%E6%8B%9F%E5%99%A8%E5%92%8C%E8%A7%A3%E5%8C%85%E5%B7%A5%E5%85%B7/" title="视觉小说常用模拟器和解包工具">视觉小说常用模拟器和解包工具</a></span>
  </li>

      
  <li class="item">
    
<div class="breadcrumb">
</div>

    <span><a href="/2023/12/16/%E6%8B%A5%E6%9C%89%E4%B8%80%E4%B8%AA%E8%87%AA%E5%B7%B1%E7%9A%84QQ%E6%9C%BA%E5%99%A8%E4%BA%BA%EF%BC%9Fgocq%E9%83%A8%E7%BD%B2zerobot%E5%BF%83%E5%BE%97/" title="拥有一个自己的QQ机器人？gocq部署zerobot心得（Windows系统）">拥有一个自己的QQ机器人？gocq部署zerobot心得（Windows系统）</a></span>
  </li>

      
  <li class="item">
    
<div class="breadcrumb">
</div>

    <span><a href="/2023/12/16/%E3%80%90%E6%80%80%E6%97%A7%E5%90%91%E3%80%91%E5%86%8D%E7%9C%8B%E4%B8%80%E7%9C%BC%E6%81%8B%E7%88%B1%E6%B8%B8%E6%88%8F%E7%BD%91/" title="【怀旧向】再看一眼恋爱资源网">【怀旧向】再看一眼恋爱资源网</a></span>
  </li>

      
  <li class="item">
    
<div class="breadcrumb">
</div>

    <span><a href="/2024/01/04/%E6%9B%BF%E4%BB%A3%E7%BB%88%E7%82%B9%E7%9A%84%E7%BD%91%E7%AB%99/" title="替代终点的网站">替代终点的网站</a></span>
  </li>

      
  <li class="item">
    
<div class="breadcrumb">
</div>

    <span><a href="/2999/02/26/%E3%80%90%E7%BD%AE%E9%A1%B6%E5%B8%96%E3%80%91%E8%B5%84%E6%BA%90%E5%8E%BB%E5%93%AA%E4%B8%8B%E8%BD%BD%EF%BC%9F%E5%9F%9F%E5%90%8D%E9%80%9A%E7%9F%A5/" title="【置顶帖】资源去哪下载？域名通知">【置顶帖】资源去哪下载？域名通知</a></span>
  </li>

      
  <li class="item">
    
<div class="breadcrumb">
</div>

    <span><a href="/2023/12/17/aurora%E7%9A%84%E4%B8%A4%E4%B8%AA%E4%B8%AA%E4%BA%BA%E4%B8%BB%E9%A1%B5%E6%BA%90%E7%A0%81%E5%88%86%E4%BA%AB/" title="aurora的两个个人主页源码分享">aurora的两个个人主页源码分享</a></span>
  </li>

      
  <li class="item">
    
<div class="breadcrumb">
</div>

    <span><a href="/2024/01/12/%E7%BB%99%E8%87%AA%E5%B7%B1%E5%AE%A3%E4%BC%A0%E7%BE%A4%E8%81%8A%E3%80%82/" title="给自己宣传群聊">给自己宣传群聊</a></span>
  </li>

      
  <li class="item">
    
<div class="breadcrumb">
</div>

    <span><a href="/2024/04/09/%E4%B8%BA%E4%BB%80%E4%B9%88%E6%88%91%E8%AE%A8%E5%8E%8C%E2%80%9C%E5%A4%A7%E4%BD%AC%E2%80%9D%EF%BC%9F/" title="为什么我讨厌“大佬”？">为什么我讨厌“大佬”？</a></span>
  </li>

  </ul>
</div>
<div>
  <h2>最新评论</h2>
  <ul class="leancloud-recent-comment"></ul>
</div>

        </div>
        <div class="status">
  <div class="copyright">
    
    &copy; 2010 – 
    <span itemprop="copyrightYear">2024</span>
    <span class="with-love">
      <i class="ic i-sakura rotate"></i>
    </span>
    <span class="author" itemprop="copyrightHolder">aurora @ aurora</span>
  </div>
  <div class="powered-by">
    基于 <span class="exturl" data-url="aHR0cHM6Ly9oZXhvLmlv">Hexo</span> & Theme.<span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL2FtZWhpbWUvaGV4by10aGVtZS1zaG9rYQ==">Shoka</span>
  </div>
</div>

      </div>
    </footer>
  </div>
<script data-config type="text/javascript">
  var LOCAL = {
    path: '2023/12/18/css选择器的学习笔记/',
    favicon: {
      show: "（●´3｀●）やれやれだぜ",
      hide: "(´Д｀)大変だ！"
    },
    search : {
      placeholder: "文章搜索",
      empty: "关于 「 ${query} 」，什么也没搜到",
      stats: "${time} ms 内找到 ${hits} 条结果"
    },
    valine: true,fancybox: true,
    copyright: '复制成功，转载请遵守 <i class="ic i-creative-commons"></i>BY-NC-SA 协议。',
    ignores : [
      function(uri) {
        return uri.includes('#');
      },
      function(uri) {
        return new RegExp(LOCAL.path+"$").test(uri);
      }
    ]
  };
</script>

<script src="https://cdn.polyfill.io/v2/polyfill.js"></script>

<script src="//cdn.jsdelivr.net/combine/npm/pace-js@1.0.2/pace.min.js,npm/pjax@0.2.8/pjax.min.js,npm/whatwg-fetch@3.4.0/dist/fetch.umd.min.js,npm/animejs@3.2.0/lib/anime.min.js,npm/algoliasearch@4/dist/algoliasearch-lite.umd.js,npm/instantsearch.js@4/dist/instantsearch.production.min.js,npm/lozad@1/dist/lozad.min.js,npm/quicklink@2/dist/quicklink.umd.js"></script>

<script src="/js/app.js?v=0.2.5"></script>




<script async>window.onload=function(){var a=document.createElement('script'),b=document.getElementsByTagName('script')[0];a.type='text/javascript',a.async=!0,a.src='/sw-register.js?v='+Date.now(),b.parentNode.insertBefore(a,b)};</script></body></html>